<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'

	const addressList = ref([])
	async function getAddress() {
		const res = await http.request({
			url: '/api/address/myAddress',
			method: 'POST',
			data: {},
		})
		console.log(res)
		addressList.value = res.data
	}
	//删除地址
	const delpopup = ref()
	const currentId = ref()
	function goDel(id) {
		if (addressList.value.length == 1) {
			uni.utils.toast('必须保留一个地址')
			return
		}
		delpopup.value.open('center')
		currentId.value = id
	}
	async function delAddress() {
		const res = await http.request({
			url: '/api/address/delAddress',
			method: 'POST',
			data: { id: currentId.value },
		})
		console.log(res)
		if (res.st == 1) {
			getAddress()
		} else {
			uni.utils.toast(res.msg)
		}
		delpopup.value.close('center')
	}
	function cancelDel() {
		delpopup.value.close('center')
	}

	// 编辑新增地址
	function gotoNew() {
		uni.navigateTo({
			url: `/minePage/editaddress/index`,
		})
	}

	function goEdite(item) {
		uni.navigateTo({
			url: `/minePage/editaddress/index?info=${encodeURIComponent(
				JSON.stringify(item)
			)}`,
		})
	}

	onShow(() => {
		getAddress()
	})
</script>

<template>
	<view class="page">
		<view class="" v-if="addressList.length">
			<!-- //列表 -->
			<view
				class="address-list"
				v-for="item in addressList"
				:key="item.id"
			>
				<!-- 左边 -->
				<view class="item-address">
					<view class="item-class1">{{
						item.province + item.city + item.area
					}}</view>
					<view class="item-class2">{{ item.address }}</view>
					<view class="item-name">
						<view class="tt1">{{ item.name }}</view>
						<view class="tt2">{{ item.mobile }}</view>
						<view class="tt3" v-if="item.is_mr == 1">默认</view>
					</view>
				</view>
				<!-- 右边 -->
				<view class="icon-add">
					<view class="icon-change" @click="goEdite(item)">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/address-change.png"
							style="width: 40rpx; height: 40rpx"
						></image>
					</view>
					<view class="icon-delete" @click="goDel(item.id)">
						<image
							src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/address-delete.png"
							style="width: 40rpx; height: 40rpx"
						></image>
					</view>
				</view>
			</view>
			<!-- //新增按钮 -->
			<view class="item-button" @click="gotoNew()">
				<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/add-address.png"></image>
			</view>
		</view>

		<!-- 缺省 -->
		<view
			class=""
			style="
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 200rpx;
			"
			v-else
		>
			<image
				src="https://ojqn.wm2177.com/wechat_imgs/address-null.png"
				style="width: 378rpx; height: 258rpx"
				mode=""
			></image>
			<view
				class=""
				style="font-size: 26rpx; color: #cacaca; line-height: 62rpx"
			>
				您还没有收货地址哟～
			</view>
			<view  class="add-address"@click="gotoNew()">
				<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/add-address.png"></image>
			</view>
		</view>

		<!-- 删除弹出层 -->
		<uni-popup ref="delpopup" type="center">
			<view class="delpopup-content">
				<view class="delpopup-title"> 提示 </view>
				<view class="delpopup-content-tow"> 确认要删除当前地址？ </view>
				<view class="delpopup-button">
					<view class="" @click="cancelDel"> 取消 </view>
					<view class="" @click="delAddress"> 确定删除 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		padding: 22rpx;
		box-sizing: border-box;
		background-color: #E9EAF2;
	}
	.add-address{
		display: flex;
		justify-content: center;
		image{
			width: 628rpx;
			height: 92rpx;
		}
	}
	.address-list {
		display: flex;
		height: 160rpx;
		background: #fff;
		padding: 22rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		&:last-child {
			margin-bottom: 200rpx;
		}
	}
	.item-address {
		flex-direction: column;
		justify-content: space-between;
		display: flex;
		width: 95%;
	}
	.item-class1,
	.item-class2 {
		width: 90%;
		font-weight: 500;
		font-size: 26rpx;
		color: #b1b0b8;
	}
	.item-class2 {
		font-size: 30rpx;
		color: #3d3d3d;
	}
	.item-name {
		align-items: center;
		display: flex;
		flex-direction: row;
		font-weight: 500;
		color: #3d3d3d;
	}
	.tt1 {
		font-size: 26rpx;
		margin-right: 60rpx;
	}
	.tt2 {
		color: #9b9b9d;
		font-size: 24rpx;
		margin-right: 60rpx;
	}
	.tt3 {
		font-size: 20rpx;
		background-color: #fff;
		border: 2rpx solid #956FED;
		border-radius: 6rpx;
		color: #956FED;
		line-height: 34rpx;
		width: 80rpx;
		text-align: center;
	}
	.icon-add {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.item-button {
		width: 100%;
		height: 170rpx;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		background-color: #fff;
		image{
			width: 628rpx;
			height: 92rpx;
		}
	}
	.delpopup-content {
		width: 600rpx;
		height: 356rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-radius: 36rpx;
		background-color: #fff;
		.delpopup-title {
			height: 114rpx;
			border-bottom: 1px solid #d8d8d8;
			text-align: center;
			font-size: 40rpx;
			line-height: 114rpx;
		}
		.delpopup-content-tow {
			height: 116rpx;
			line-height: 116rpx;
			text-align: center;
			font-size: 28rpx;
			color: #9b9b9d;
		}
		.delpopup-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				width: 234rpx;
				height: 80rpx;
				background-color: $all-color;
				border-radius: 40rpx;
				text-align: center;
				font-size: 26rpx;
				line-height: 80rpx;
				color: #fff;
				&:first-child {
					border: 2rpx solid $all-color;
					background-color: #fff;
					color: $all-color;
				}
			}
		}
	}
</style>
